<template>
  <!-- 给根容器添加class，用于设置背景色 -->
  <view class="page-container">
    <!-- 1. 新增：最新资讯标题，通过flex实现水平垂直居中 -->
    <view class="news-title">最新资讯</view>

    <!-- 循环渲染组件，传入不同数据 -->
    <view 
      v-for="(item, index) in dataList" 
      :key="index" 
      style="margin: 10rpx;"
    >
      <CustomTextView
        :title="item.title"
        :isTop="item.isTop"
        :author="item.author"
        :comments="item.comments"
        :time="item.time"
        @titleClick="goDetail"
        @authorClick="showAuthor"
      >
        <!-- 默认插槽内容 -->
        <view class="slot-content">这是组件的默认插槽内容~</view>
        
        <!-- 具名插槽内容（简化语法） -->
        <template #footer>
          <view class="footer-slot">底部专属插槽</view>
        </template>
      </CustomTextView>
    </view>
  </view>
</template>

<script>
// 导入自定义组件（注意路径需与实际文件位置匹配）
import CustomTextView from "../../../components/cardViewText.vue"

export default {
  // 注册组件
  components: {
    CustomTextView
  },
  data() {
    return {
      dataList: [
        {
          title: "乘势而上，续写中国奇迹新篇章—党的二十届四中全会侧记",
          isTop: true,
          author: "新华社",
          comments: 56,
          time: "2025.10.25"
        },
        {
          title: "14个月从0家开到100家门店，蜜雪冰城如何做到",
          isTop: false,
          author: "央视新闻",
          comments: 102,
          time: "2025.10.20"
        },
		{
		  title: "视频画报｜携手开创亚太发展新时代",
		  isTop: false,
		  author: "新华社",
		  comments: "91.1万",
		  time: "2025.10.29"
		},
		{
		  title: "年轻人关心的这些事，“十五五”规划建议都提到了",
		  isTop: false,
		  author: "人民日报客户端",
		  comments: "223万",
		  time: "2025.10.29"
		},
		{
		  title: "【理响中国】解码中华文明 | 从未停更的大地史书——中华文明具有突出的连续性",
		  isTop: false,
		  author: "中国人民网",
		  comments: "110万",
		  time: "2025.10.29"
		},
		{
		  title: "喜欢您来！福建美味“不基础”",
		  isTop: false,
		  author: "福州日报",
		  comments: 9999,
		  time: "2025.10.29"
		},
		{
		  title: "“双节”假期福建礼物市集人气旺 市民游客赶集看好戏",
		  isTop: false,
		  author: "东南网",
		  comments: "135万",
		  time: "2025.10.29"
		},
		{
		  title: "美参议院未通过两党所提拨款法案 政府“关门”持续",
		  isTop: false,
		  author: "央视新闻",
		  comments: "13.14万",
		  time: "2025.10.07"
		},
		{
		  title: "福建隐藏的“吃货天堂”，弓鱼术竟成为鱼鲜秘诀？",
		  isTop: false,
		  author: "福州日报",
		  comments: "520万",
		  time: "2025.10.29"
		},
      ]
    }
  },
  methods: {
    // 响应组件的“titleClick”事件
    goDetail(title) {
      uni.showToast({
        title: `点击标题：${title}，跳转详情页`,
        icon: "none"
      })
    },
    // 响应组件的“authorClick”事件
    showAuthor(author) {
      uni.showModal({
        title: "作者信息",
        content: `作者：${author}`
      })
    }
  }
}
</script>

<style scoped>
/* 根容器样式 - 设置页面背景色 */
.page-container {
  background-color: #f0f8fa; /* 浅灰色背景，可替换为其他颜色值 */
  min-height: 100vh; /* 确保背景色铺满整个屏幕高度 */
  padding: 10rpx; /* 可选：添加内边距，让内容与边缘有间距 */
}

/* 2. 新增：标题样式，控制居中、字体和间距 */
.news-title {
  display: flex; /* 开启flex布局 */
  justify-content: center; /* 水平方向居中 */
  align-items: center; /* 垂直方向居中 */
  height: 80rpx; /* 设置标题高度，确保垂直居中效果可见 */
  font-size: 36rpx; /* 标题字体大小 */
  font-weight: bold; /* 标题字体加粗 */
  margin-bottom: 20rpx; /* 标题与下方组件的间距，避免拥挤 */
}

.slot-content {
  background-color: #e2edff;
  padding: 10rpx;
}

.footer-slot {
  color: blue;
  text-align: center;
  margin-top: 10rpx;
}
</style>